<template>
  <div>
    <div class="outmain ba_f">
      <el-form :inline="false" :model="form" class="demo-form-inline" label-width="100px">
        <div class="flex ba_f">
          <el-form-item label="查询日期：" class="mar_t20">
            <div class="flex-bet">
              <div>
                <el-radio-group v-model="form.timeType" @change="selectType">
                  <el-radio-button label="1">今天</el-radio-button>
                  <el-radio-button label="2">近七天</el-radio-button>
                  <el-radio-button label="3">近十五天</el-radio-button>
                  <el-radio-button label="4">自定义时间</el-radio-button>
                </el-radio-group>
                <span class="mar_l20" v-if="form.timeType=='4'">
                  <el-date-picker v-model="form.time" type="daterange" range-separator="至" start-placeholder="开始日期"
                                  end-placeholder="结束日期" format="yyyy年MM月dd日" @change="selectType"></el-date-picker>
                </span>
              </div>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="outmain ba_f mar_t20">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>财务对账</span>
        </div>
      </div>
      <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          class="tablecenter">
        <el-table-column
            prop="day"
            label="日期"
        >
        </el-table-column>
        <el-table-column
            prop="count"
            label="有效订单数"
        >
          <template slot-scope="scope">
            <div class="wei">{{ scope.row.count }}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="money"
            label="营业总额"
        >
          <template slot-scope="scope">
            <div class="color-green wei">+￥{{ scope.row.money }}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="serviceMoney"
            label="平台服务费"
        >
          <template slot-scope="scope">
            <div class="color-red wei">-￥{{ scope.row.serviceMoney }}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="storeActualMoney"
            label="预计收入"
        >
          <template slot-scope="scope">
            <div class="color-green wei">+￥{{ scope.row.storeActualMoney }}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="cc"
            label="操作"
            width="300"
        >
          <template slot-scope="scope">
            <div class="flex-center">
              <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          layout="prev, pager, next"
          :total="page.total"
          :page-size="page.size"
          :current-page.sync='page.currentPage'
          @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex'
import {waitMoney, billList, billPrint} from "@/api/statistics";
import {changeDate} from "@/utils/index";
import index from "../../../api";

export default {
  data() {
    return {
      formInline: {
        value1: '',
        value2: '',
        region: '',
        time: [],
        mouth: '',
      },
      form: {
        shopValue: '',
        timeType: '1',
        time: [new Date(), new Date()],
        Mtime: ''
      },
      options: [],
      activeName: '1',
      tableData: [],
      tableData2: [],
      page: {
        total: 0,
        size: 20,
        currentPage: 1,
      },
    }
  },
  created() {
    this.billList();
  },
  computed: {
    ...mapState(['storeId'])
  },
  methods: {
    handleClick() {
    },
    handleDetail(row) {
      this.$router.push(`/storefinancerecordDetail?time=${row.day}`);
    },
    handelExport(row) {
      let backendPath = index.backendPath
      return backendPath + "channel/store-bill/order-export?time=" + row.day + "&storeId=" + this.storeId
    },
    handelExport2(row) {
      let backendPath = index.backendPath
      return backendPath + "channel/store-bill/other-order-export?time=" + row.day + "&storeId=" + this.storeId
    },
    async handelPrinting(row) {
      const {msg} = await billPrint({time: row.day, storeId: this.storeId});
      this.$baseMessage(msg, "success");
    },
    async billList() {
      var params = {
        page: this.page.currentPage,
        timeType: this.form.timeType,
        startTime: this.form.timeType == '4' && this.form.time ? changeDate(this.form.time[0]).substr(0, 10) : '',
        endTime: this.form.timeType == '4' && this.form.time ? changeDate(this.form.time[1]).substr(0, 10) : '',
        storeId: this.storeId,
      };
      const {data,count} = await billList(params);
      this.tableData = data
      this.page.total = count
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.billList();
    },
    selectType() {
      this.billList()
    },
    changeStore() {
      this.billList()
    },
    onSubmit2() {
      this.billList()
    },
  }
}
</script>
